<template>

    <div>
			<div v-if="chenload">
				<div class="center" v-for="(item,index) in arr">
				  <img :src="img+item.avatar" alt="" class="headImg">
				  <div class="phone">
				    <p>{{item.name}}</p>
				    <p @click="tel(item)">
				      <img src="../../../src/assets/img/faxian/phone.png" alt="">
				      <span>{{item.tel}}</span>
				    </p>
				  </div>
				  <img :src="img+item.qr_code"  @click="btn(index)" class="img">
				  <p style="width: 100%;height: 0.02rem;background: #EDEDED;margin-top: 0.3rem;"></p>
				</div>
			</div>
			<div class="loadmore" v-else>
				<img src="../../../src/assets/img/load.gif" alt="">
			</div>
    </div>


</template>

<script>
  import { ImagePreview } from 'vant';
    export default {
        name: "Kefu",
      data(){
          return{
						chenload:false,
            arr:[],
            imgs:[],
            img:this.$store.state.img
          }
      },
      methods:{
          tel(item){
            window.location.href = 'tel://' + item.tel;

          //  记录点击次数
            this.axios.get(this.$store.state.url +'find/serviceHit',{
              params:{
                id:item.id
              }
            }).then(res=>{
							
              if (res.data.errcode == 0){
                console.log(res.data);
              }
            })
          },
          btn(index){

            this.imgs = [];
            for (var i = 0;i<this.arr.length;i++){
              this.imgs.push(this.img+this.arr[i].qr_code)

            }


            ImagePreview({
              images:this.imgs,
              startPosition: index,
              onClose() {
                // do something
              }
            });
          }

      },
      mounted(){
				this.sdk.getJSSDK('','',this.$store.state.url);	
        this.axios.get(this.$store.state.url +'find/serviceList').then(res=>{
          this.chenload=true;
          if (res.data.errcode == 0){
            this.arr = res.data.data.lists
            console.log(this.arr)
          }
        })
      }
    }
</script>

<style scoped>
  .center{
    width: 92%;
   margin: auto;

    margin-top: 0.3rem;
  }
  .headImg{
    width: 1.37rem;
    height: 1.37rem;
    border-radius: 50%;
  }
  .phone{
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-left: 0.35rem;
  }
  .phone p:nth-child(1){
    font-size:0.32rem;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    margin-top: 0.2rem;
  }
  .phone p:nth-child(2){
    margin-top: 0.35rem;
  }
  .phone p:nth-child(2) img{
    width: 0.32rem;
    height: 0.32rem;
    display: inline-block;
    vertical-align:middle;
  }
  .phone p:nth-child(2) span{
    font-size:0.3rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .img{
    width: 1.23rem;
    height: 1.23rem;
    float: right;
    margin-top: 0.05rem;
  }

</style>
